<template>
    <div class="wrapper">
        <HeaderNav
                title="注册"
        >
            <div slot="right">
                <router-link to="/login">
                    登陆
                </router-link>
            </div>
        </HeaderNav>
        <div class="logo_text">
            <img src="https://m.diyeetech.com/static/logo-footer.png"></img>
            <div class="text">定易科技</div>
        </div>
        <div class="fileds">
            <input placeholder="请输入用户名" type="text" v-model="name"></input>
            <input placeholder="密码" type="password" v-model="password"></input>
            <input placeholder="再次确认密码" type="password" v-model="repassword"></input>
        </div>
        <div class="loginbtn" @click="register">
            注册
        </div>
    </div>
</template>
<script>
    import HeaderNav from '../../components/HeaderNav'
    import {register} from "./service";
    import MyAlert from "../../utils/myalert";

    export default {
        components: {
            HeaderNav
        },
        data() {
            return {
                name: "",
                password: "",
                repassword: ""
            }
        },
        methods: {
            register: async function () {
                var self = this
                if (this.$data.password != this.$data.repassword) {
                    MyAlert.fail("密码不一致")
                    return false
                }
                if (!this.$data.name || !this.$data.password) {
                    MyAlert.fail("不能为空")
                    return false
                }
                MyAlert.loading()
                register({name: this.$data.name, password: this.$data.password}).then(res => {
                    MyAlert.close()
                    /*注册成功*/
                    MyAlert.success("注册成功")
                    setTimeout(() => {
                        self.$router.push({path: '/login'})
                    }, 1000)

                }).catch(e => {
                    MyAlert.close()
                    console.error(e)
                    window.MINT.MessageBox({
                        title: '错误',
                        message: e.message,
                    })
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        .logo_text {
            margin-top: 100px;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            .text {
                margin-top: 10px;
                font-size: 20px;
            }
        }
        .fileds {
            margin-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            input {
                width: 100%;
                display: block;
                border: none;
                height: px2rem(80);
                padding-left: 20px;
                border-bottom: 1px solid #eee;
                &:last-child {
                    border-bottom: none;
                }
            }
        }
        .loginbtn {
            margin: 30px auto auto;
            width: 2rem;
            height: .5rem;
            color: #fff;
            background-image: linear-gradient(90deg, #ff5d31, #fb4100), linear-gradient(#ff4800, #ff4800);
            background-blend-mode: normal, normal;
            box-shadow: 0 8px 18px 0 rgba(255, 72, 0, .3);
            border-radius: .215rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>